<template>
  <!-- 巡检管理-巡检结果-TabOne -->
  <div class="inspection-result-tab-one">
    <a-card class="card card1" title="查询">
      <div class="input-box">
        <div class="item">
          <div class="text">巡检名称</div>
          <a-input
            class="input"
            placeholder="请输入"
            v-model:value="formData.inspectionName"
          >
          </a-input>
        </div>
        <div class="item">
          <div class="text">资源名称</div>
          <a-input
            class="input"
            placeholder="请输入"
            v-model:value="formData.resourceName"
          >
          </a-input>
        </div>
        <div class="item">
          <div class="text">IP地址</div>
          <a-input
            class="input"
            placeholder="请输入"
            v-model:value="formData.address"
          >
          </a-input>
        </div>
        <div class="item">
          <div class="text">告警级别</div>
          <a-select
            class="input"
            placeholder="请选择"
            v-model:value="formData.alarmLevel"
          >
            <a-select-option :value="1">提示</a-select-option>
            <a-select-option :value="2">一般</a-select-option>
            <a-select-option :value="3">警告</a-select-option>
            <a-select-option :value="4">严重</a-select-option>
          </a-select>
        </div>
        <div class="item">
          <div class="text">处理状态</div>
          <a-select
            class="input"
            placeholder="请选择"
            v-model:value="formData.processStatus"
          >
            <a-select-option :value="0">未处理</a-select-option>
            <a-select-option :value="1">已处理</a-select-option>
          </a-select>
        </div>
        <div class="item button-box">
          <a-button class="button" @click="clickReset">重置</a-button>
          <a-button type="primary" @click="clickQuery">查询</a-button>
        </div>
      </div>
    </a-card>
    <a-card class="card card2" title="列表">
      <template #extra>
        <div class="button-box">
          <a-popconfirm
            title="确认删除？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="clickDel('批量删除', undefined)"
          >
            <a-button class="button"> 批量删除 </a-button>
          </a-popconfirm>

          <a-button class="button" type="primary" @click="clickExport"
            >导出报告</a-button
          >
        </div>
      </template>
      <a-table
        class="table"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :row-selection="{
          selectedRowKeys: tableSelectedRowKeys,
          onChange: onSelectChange,
        }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <div class="operation">
              <a-popconfirm
                title="确认删除？"
                ok-text="确认"
                cancel-text="取消"
                @confirm="clickDel('删除', record)"
              >
                <span>删除</span>
              </a-popconfirm>
            </div>
          </template>
        </template>
      </a-table>
      <a-pagination
        v-model:current="formData.pageNum"
        v-model:pageSize="formData.pageSize"
        :total="formData.total"
        :show-total="total => `共 ${total} 条数据`"
        :show-size-changer="true"
        @change="changePagination"
      />
    </a-card>
  </div>
</template>
<script setup lang="ts">
  // 引入组件
  // 引入方法
  import api from '@/axios/api.js'
  import { message } from 'ant-design-vue'
  import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
  import commonMethod from '@/common-method/common-method'
  const props = defineProps({})
  const emits = defineEmits([])
  // 自定义状态
  const formData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0,
    ids: undefined, //	导出ids
    inspectionName: undefined, //巡检任务名称
    resourceName: undefined, //资源名称
    alarmLevel: undefined, //	告警级别（1-提示 2-一般 3-警告 4-严重）
    address: undefined, //	ip地址
    processStatus: undefined, //处理状态 0未处理 1已处理
  })
  const columns = ref([
    { title: '告警级别', dataIndex: 'alarmLevel' },
    { title: '资源类型', dataIndex: 'resourceTypeName' },
    { title: '资源名称', dataIndex: 'resourceName' },
    { title: 'IP地址', dataIndex: 'address' },
    { title: '告警信息', dataIndex: 'alarmMessage' },
    { title: '最后一次告警时间', dataIndex: 'lastAlarmTime' },
    { title: '操作', dataIndex: 'operation' },
  ]) //列表配置
  const tableData = ref([]) //列表数据
  const tableSelectedRowKeys = ref([]) //表格选中的值
  onMounted(() => {
    getInspectionAnomalyList(formData.value)
  })
  // 自定义方法
  //获取巡检异常项列表
  const getInspectionAnomalyList = async data => {
    const res = await api.getInspectionAnomalyList(data)
    console.log('获取巡检报告列表', res)
    tableData.value = res.data.data.records.map(item => {
      return { ...item, key: item.id }
    })
    formData.value.total = res.data.data.total
  }
  //删除巡检异常项
  const delInspectionAnomalyList = async data => {
    const res = await api.delInspectionAnomalyList(data)
    if (res.data.code === 200) {
      message.success('删除成功')
      getInspectionAnomalyList(formData.value)
    } else {
      message.error('删除失败')
    }
  }
  //导出巡检异常项
  const exportInspectionAnomalyList = async data => {
    console.log('data', data)
    const res = await api.exportInspectionAnomalyList(data)
    console.log('导出巡检异常项', res)
    if (res.status === 200) {
      commonMethod.derive(res)
    } else {
      message.error(res.data.msg)
    }
  }
  //点击重置
  const clickReset = () => {
    formData.value = {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      ids: undefined, //	导出ids
      inspectionName: undefined, //巡检任务名称
      resourceName: undefined, //资源名称
      alarmLevel: undefined, //	告警级别（1-提示 2-一般 3-警告 4-严重）
      address: undefined, //	ip地址
      processStatus: undefined, //处理状态 0未处理 1已处理
    }
    getInspectionAnomalyList(formData.value)
  }
  //点击查询
  const clickQuery = () => {
    getInspectionAnomalyList(formData.value)
  }
  //表格选中改变
  const onSelectChange = selectedRowKeys => {
    tableSelectedRowKeys.value = selectedRowKeys
    formData.value.ids = selectedRowKeys
  }
  //点击删除
  const clickDel = (value, record) => {
    console.log('value', value, record)
    if (value === '删除') {
      delInspectionAnomalyList([record.id])
    } else if (value === '批量删除') {
      delInspectionAnomalyList(tableSelectedRowKeys.value)
    }
  }
  //分页改变
  const changePagination = () => {
    getInspectionAnomalyList(formData.value)
  }
  //点击导出
  const clickExport = () => {
    exportInspectionAnomalyList(formData.value)
  }
</script>
<style lang="less" scoped>
  .inspection-result-tab-one {
    .card1 {
      margin-bottom: (20 / @vh);
      .input-box {
        display: flex;
        flex-wrap: wrap;
        gap: (20 / @vw);
        .item {
          display: flex;
          align-items: center;
          @px: (15 / @vw);
          width: calc(25% - @px);
          .text {
            margin-right: (10 / @vw);
            width: (100 / @vw);
            text-align: right;
          }
          .input {
            flex: 1;
          }
          .button {
            margin-right: (10 / @vw);
          }
        }
        .Last-run-time {
          width: 75%;
          .text {
            width: (160 / @vw);
          }
        }
        .button-box {
          width: 100%;
        }
      }
    }
    .card2 {
      .button-box {
        .button {
          margin-right: (10 / @vw);
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .table {
        margin-bottom: (20 / @vh);
        .operation {
          span {
            margin-right: (10 / @vw);
            color: @tc;
            cursor: pointer;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
</style>
